<template>
  <view class="week-box">
    <view class="week-title">
      <text
        v-for="(item, index) in weekList"
        :key="index"
        :class="{ 'text-active': weekDay == item.weekDay }"
        >{{ item.week }}</text
      >
    </view>
    <view class="week-day">
      <view class="day-body" :class="dayClass">
        <view
          class="day"
          :class="thsDayTime == index ? 'active' : ''"
          v-for="(item, index) in days"
          :key="index"
        >
          <text :class="item.sel ? 'sel' : ''" @tap="change(item, index)"
            >{{ item.m }}月{{ item.d }}</text
          >
        </view>
      </view>
    </view>
    <!-- <view class="week-time-wraaper">
		<view class="week-time" v-if="showNone">
			<template v-for="(item, index) in useTime">
				<view
				  v-if="!item.gayer"
				  @click="changeSelectTime(item, index)"
				  class="week-time-view"
				  :class="item.gayer ? 'gayer' : index === selectTime ? 'green' : ''"
				  :key="index"
				>
				  <text>{{ item.time }}</text>
				  <text :class="item.fullness ? 'huise' : ''">{{
					item.fullness ? "不可预约" : "预约"
				  }}</text>
				</view>
			</template>
		</view>
		<view  v-else style="margin: 0 auto">
			<view class="nodata">
			  <image src="@/static/images/nodata.png" mode=""></image>
			  <text style="color: #ffffff">预约其他时间吧</text>
			</view>
		</view>
    </view> -->
    <scroll-view
      scroll-y="true"
      style="height: 800rpx; padding: 0 0 30rpx"
      scroll-with-animation="true"
    >
      <view class="week-time-wraaper">
        <view class="week-time" v-if="showNone">
          <template v-for="(item, index) in useTime">
            <view
              v-if="!item.gayer"
              @click="changeSelectTime(item, index)"
              class="week-time-view"
              :class="
                item.gayer ? 'gayer' : index === selectTime ? 'green' : ''
              "
              :key="index"
            >
              <text>{{ item.time }}</text>
              <text :class="item.fullness ? 'huise' : ''">{{
                item.fullness ? "不可预约" : "预约"
              }}</text>
            </view>
          </template>
        </view>
        <view v-else style="margin: 0 auto">
          <view class="nodata">
            <image src="@/static/images/nodata.png" mode=""></image>
            <text style="color: #ffffff">预约其他时间吧</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: 0,
    },
    addtime: {
      type: Number,
      default: 0,
    },
    technician_start_time: {
      type: Number,
      default: 0,
    },
    technician_end_time: {
      type: Number,
      default: 0,
    },
    serverTime: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      /* 移动所需参数 */
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      status: false,
      /* end */
      thsDayTime: "",
      y: "",
      m: "",
      d: "",
      thsDay: "",
      date: "",
      days: [],
      move: true,
      dayClass: "",
      weekDay: "",
      nowH: 0,
      date: "",
      useTime: [],
      selectTime: null,
      showNone: false,
      weekList: [
        {
          weekDay: 6,
          week: "周六",
        },
        {
          weekDay: 7,
          week: "周日",
        },
        {
          weekDay: 1,
          week: "周一",
        },
        {
          weekDay: 2,
          week: "周二",
        },
        {
          weekDay: 3,
          week: "周三",
        },
        {
          weekDay: 4,
          week: "周四",
        },
        {
          weekDay: 5,
          week: "周五",
        },
      ],
    };
  },
  created() {
    // 获取当前小时
    let h = new Date().getHours();
    let mm = new Date().getMinutes();
    let D = new Date().getDate();
    let nowTime = new Date();
    if (h === 23 && mm >= 30) {
      nowTime = new Date(new Date().setDate(D + 1));
    }
    this.nowH = h;
    this.init(nowTime);
    return;
    this.weekDay = nowTime.getDay();
    if (this.weekDay === 0) {
      // 星期天派第一
      this.weekList = [
        { weekDay: 7, week: "周日" },
        { weekDay: 1, week: "周一" },
        { weekDay: 2, week: "周二" },
        { weekDay: 3, week: "周三" },
        { weekDay: 4, week: "周四" },
        { weekDay: 5, week: "周五" },
        { weekDay: 6, week: "周六" },
      ];
    }
    if (this.weekDay === 1) {
      // 星期一派第一
      this.weekList = [
        { weekDay: 1, week: "周一" },
        { weekDay: 2, week: "周二" },
        { weekDay: 3, week: "周三" },
        { weekDay: 4, week: "周四" },
        { weekDay: 5, week: "周五" },
        { weekDay: 6, week: "周六" },
        { weekDay: 7, week: "周日" },
      ];
    }

    if (this.weekDay === 2) {
      // 星期二派第一
      this.weekList = [
        { weekDay: 2, week: "周二" },
        { weekDay: 3, week: "周三" },
        { weekDay: 4, week: "周四" },
        { weekDay: 5, week: "周五" },
        { weekDay: 6, week: "周六" },
        { weekDay: 7, week: "周日" },
        { weekDay: 1, week: "周一" },
      ];
    }

    if (this.weekDay === 3) {
      // 星期三派第一
      this.weekList = [
        { weekDay: 3, week: "周三" },
        { weekDay: 4, week: "周四" },
        { weekDay: 5, week: "周五" },
        { weekDay: 6, week: "周六" },
        { weekDay: 7, week: "周日" },
        { weekDay: 1, week: "周一" },
        { weekDay: 2, week: "周二" },
      ];
    }

    if (this.weekDay === 4) {
      // 星期四派第一
      this.weekList = [
        { weekDay: 4, week: "周四" },
        { weekDay: 5, week: "周五" },
        { weekDay: 6, week: "周六" },
        { weekDay: 7, week: "周日" },
        { weekDay: 1, week: "周一" },
        { weekDay: 2, week: "周二" },
        { weekDay: 3, week: "周三" },
      ];
    }

    if (this.weekDay === 5) {
      // 星期五派第一
      this.weekList = [
        { weekDay: 5, week: "周五" },
        { weekDay: 6, week: "周六" },
        { weekDay: 7, week: "周日" },
        { weekDay: 1, week: "周一" },
        { weekDay: 2, week: "周二" },
        { weekDay: 3, week: "周三" },
        { weekDay: 4, week: "周四" },
      ];
    }

    if (this.weekDay === 6) {
      // 星期六派第一
      this.weekList = [
        { weekDay: 6, week: "周六" },
        { weekDay: 7, week: "周日" },
        { weekDay: 1, week: "周一" },
        { weekDay: 2, week: "周二" },
        { weekDay: 3, week: "周三" },
        { weekDay: 4, week: "周四" },
        { weekDay: 5, week: "周五" },
      ];
    }

    let y = nowTime.getFullYear();
    let m = nowTime.getMonth() + 1;
    let d = nowTime.getDate();
    let s = m.toString().length == 1 ? "0" + m.toString() : m;
    let r = d.toString().length == 1 ? "0" + d.toString() : d;
    this.date = `${y}-${m}-${d}`;
  },
  methods: {
    init(date) {
      this.thsDay =
        date.getFullYear() +
        "-" +
        this.fill(Number(date.getMonth()) + 1) +
        "-" +
        this.fill(date.getDate());

      this.date = this.format(date);
      this.setDays(date);
      this.getTime();
    },
    changeSelectTime(item, index) {
      if (item.gayer || item.fullness) {
        return;
      }
      this.selectTime = index;
      this.$emit("changeServiceTime", {
        time: `${this.days[Number(this.thsDayTime)].y}-${
          this.days[Number(this.thsDayTime)].m
        }-${this.days[Number(this.thsDayTime)].d} ${
          this.useTime[this.selectTime].time
        }`,
      });
    },
    getTime() {
      this.useTime = [];
      // 	获取当前日期
      let cTime = `${this.days[Number(this.thsDayTime)].y}-${
        this.days[Number(this.thsDayTime)].m
      }-${this.days[Number(this.thsDayTime)].d}`;
      // console.log(this.date,'this.datethis.date')
      var date = new Date();
      let nowTime =
        date.getFullYear() +
        "-" +
        this.fill(Number(date.getMonth()) + 1) +
        "-" +
        this.fill(date.getDate());
      let nowH = date.getHours();
      let nowF = date.getMinutes();
      // 获取已用时间
      this.$http
        .post("api/order/dateList", {
          date: `${this.days[Number(this.thsDayTime)].m}-${
            this.days[Number(this.thsDayTime)].d
          }`,
          id: this.id,
          addtime: this.addtime,
        })
        .then((res) => {
          let start = this.technician_start_time;
          let end = this.technician_end_time;
          let computStart = Number(start / 2);
          let computEnd = Number(end / 2);
          for (let i = computStart; i <= computEnd; i += 0.5) {
            let d = i;
            if (Number.isInteger(d)) {
              d = d < 10 ? "0" + d + ":00" : d + ":00";
            } else {
              d = d < 10 ? "0" + parseInt(d) + ":30" : parseInt(d) + ":30";
            }
            var length = this.useTime.length;
            this.useTime.push({
              time: d,
              fullness: false,
              gayer: false,
            });

            res.forEach((item) => {
              if (item.hour === d) {
                this.useTime[length].fullness = true;
              }
            });
            var flgmin = 0;
            if (nowF > 30) {
              nowF > 45 ? (flgmin = 1) : (flgmin = 0.5);
            } else {
              nowF > 15 ? (flgmin = 0.5) : (flgmin = 0);
            }
            if (nowTime === cTime) {
              if (Number(i) <= nowH + flgmin) {
                this.useTime[length].gayer = true;
              } else {
              }
            } else {
              if (nowH == 23 && nowF > 45) {
                this.useTime[0].gayer = true;
              }
            }
          }

          var num = [];
          if (this.serverTime > 0) {
            var serverTime = Math.ceil(this.serverTime / 30);
          } else {
            var serverTime = 0;
          }

          this.useTime.forEach((item, index) => {
            if (item.gayer == false) {
              this.showNone = true;
            }
            if (item.fullness == false) {
              num.push(index);
            } else {
              if (num.length < serverTime && num.length > 0) {
                num.forEach((key) => {
                  this.useTime[key].fullness = true;
                });
              }
              num = [];
            }

            //判断时间
          });
          // console.log("this.useTime", this.useTime);
        });
    },
    setDays() {
      for (let i = 0; i < 7; i++) {
        let h = new Date().getHours();
        let mm = new Date().getMinutes();
        let D = new Date().getDate();
        let nowTime = new Date();
        if (h === 23 && mm >= 30) {
          // 时间在23:30分之后
          nowTime = new Date(new Date().setDate(D + 1));
        }
        let time = nowTime;
        let d = time.getDate() + i;
        let new_time = time.setDate(d);
        let start =
          time.getFullYear() +
          "-" +
          this.fill(Number(time.getMonth()) + 1) +
          "-" +
          this.fill(time.getDate());
        this.days[i] = {
          y: new Date(new_time).getFullYear(),
          m: this.fill(new Date(new_time).getMonth() + 1),
          d: this.fill(new Date(new_time).getDate()),
          sel: start == this.thsDay,
        };
      }

      // console.log("this.days", this.days);
      // this.$forceUpdate();
    },
    change(d, index) {
      /* 删除此代码可关闭不可点击当前时间之前的功能能 */
      // if (this.thsDayTime > d.y + d.m + d.d) {
      // 	uni.showToast({
      // 		title: '预约时间不得小于当天',
      // 		duration: 3000,
      // 		icon: 'none'
      // 	})
      // 	return
      // }
      /* END */
      // let date = new Date(d.y, d.m - 1, d.d)
      // this.weekDay = date.getDay()
      // this.init(date);
      this.days.forEach((item) => {
        item.sel = false;
      });
      this.thsDayTime = index;
      d.sel = true;
      this.getTime();
      this.$emit("back", this.date);
    },
    format(date) {
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      return y + "-" + this.fill(m) + "-" + this.fill(d);
    },
    fill(a) {
      return 10 > a ? "0" + (0 | a) : a;
    },
    getWeek(y, m, d) {
      return new Date(y, m, d).getDay();
    },
    getWeek1(date) {
      let nowTime = date.getTime();
      let day = date.getDay() == 0 ? 7 : date.getDay();
      let oneDayLong = 24 * 60 * 60;
      let time = nowTime - (day - 1) * oneDayLong;
      let week1 = new Date(time);
      return this.format(week1);
    },
    addDate(date, days) {
      if (days == undefined || days == "") {
        days = 1;
      }
      var date = new Date(date);
      date.setDate(date.getDate() + days);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      return y + "-" + this.fill(m) + "-" + this.fill(d);
    },
    moveDay(y, m, d) {
      d = d == 0 ? "00" : d;
      let date = new Date(y, m, d || this.d);
      this.setDays(date);
    },
    prevYear() {
      this.moveDay(this.y - 1, this.m);
    },
    nextYear() {
      this.moveDay(this.y + 1, this.m);
    },
    prevMonth() {
      this.moveDay(this.y, this.m - 1);
    },
    nextMonth() {
      this.moveDay(this.y, this.m + 1);
    },
    prevWeek() {
      if (this.move) {
        this.move = false;
        this.dayClass = "to-left";
        let ths = this;
        setTimeout(function () {
          ths.dayClass = "";
          ths.moveDay(ths.y, ths.m, ths.d - 7);
          ths.move = true;
        }, 1000);
      }
    },
    nextWeek() {
      if (this.move) {
        this.move = false;
        this.dayClass = "to-right";
        let ths = this;
        setTimeout(function () {
          ths.dayClass = "";
          ths.moveDay(ths.y, ths.m, ths.d + 7);
          ths.move = true;
        }, 1000);
      }
    },
  },
};
</script>

<style>
/* 周日期样式*/
.week-box {
  position: relative;
  margin: 0 0rpx;
  color: #ffffff;
  font-size: 24rpx;
  border-radius: 20rpx;
}

.week-ym {
  font-size: 30rpx;
  line-height: 72rpx;
  text-align: center;
}

.week-ym .i {
  display: inline-block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: dashed;
  border-width: 16rpx;
  margin-top: -6rpx;
  vertical-align: middle;
}

.week-ym .next-i {
  margin-right: 10rpx;
  border-left-color: #376ef1;
}

.week-ym .prev-i {
  margin-left: 10rpx;
  border-right-color: #376ef1;
}

.week-title {
  line-height: 54rpx;
  color: #ffffff;
  position: absolute;
  width: 100%;
}

.week-title text {
  display: inline-block;
  text-align: center;
  width: 14%;
}

.week-day {
  overflow: hidden;
  position: relative;
  height: 130rpx;
  padding-top: 50rpx;
}

.week-day .day-body {
  position: absolute;
  width: 100%;
  left: 0;
}

.week-day .day {
  text-align: center;
  display: inline-block;
  width: 14%;
  height: 56rpx;
  line-height: 56rpx;
  color: #ffffff;
  font-size: 20rpx;
  font-weight: 600;
}

.week-day .day.active {
  color: #93dcb7;
}

.week-day .sel {
  display: inline-block;
  border-radius: 0 0 10rpx 10rpx;
  padding: 0 11rpx;
  color: #18b567;
  background-color: #ffffff;
  color: #18b567;
  border-radius: 10rpx;
}

.week-time {
  display: flex;
  flex-wrap: wrap;

  /* height: 100%; */
  /* overflow-y: auto; */
}

.week-time-wraaper {
  height: 830rpx;
  /* overflow-y: auto; */
  /* padding: 30rpx 0; */
  /* margin-bottom: 30rpx; */
  /*这个属性使其可移动*/
}

.week-time-view {
  width: 153rpx;
  height: 112rpx;

  background-color: rgba(255, 255, 255, 1);
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  margin-right: 18rpx;
  margin-bottom: 10rpx;
  color: rgba(80, 80, 80, 1);
  font-size: 28rpx;
  font-weight: bold;
  align-items: center;
  justify-content: center;
}

.week-time-view text:last-of-type {
  font-size: 24rpx;
  font-weight: normal;
  color: rgba(24, 181, 103, 1);
}

.green {
  box-sizing: border-box;
  background-color: rgba(227, 246, 236, 1);
  border: 2rpx solid rgba(147, 220, 183, 1);
}

.gayer {
  background-color: rgba(228, 228, 228, 1);
  color: rgba(210, 210, 210, 1);
}

.gayer text:last-of-type {
  color: rgba(201, 201, 201, 1);
}

.yellow {
  color: rgba(243, 151, 53, 1) !important;
}

.huise {
  color: #9e9e9e !important;
}

.to-left {
  animation: toLeft 1s ease-in infinite;
}

.to-right {
  animation: toRight 1s ease-in infinite;
}

.nodata {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  image {
    width: 520rpx;
    height: 520rpx;
  }

  text {
    color: rgba(80, 80, 80, 1);
    font-size: 28rpx;
    margin-top: 24rpx;
  }
}

@-webkit-keyframes toLeft {
  from {
    left: -100%;
  }

  to {
    left: 0%;
  }
}

@-webkit-keyframes toRight {
  from {
    left: -100%;
  }

  to {
    left: -200%;
  }
}
</style>
